<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/logo.png" alt="" />
        </template>
        <template #right>
          <van-icon
            name="search"
            @click="moveSearchPageFn"
            color="#fff"
            size="0.48rem"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- 标签栏 -->
    <div class="main">
      <van-tabs
        v-model="channelId"
        @change="channelChangeFn"
        animated
        sticky
        offset-top="1.22667rem"
      >
        <van-tab
          :title="obj.name"
          v-for="obj in userChannelList"
          :key="obj.id"
          :name="obj.id"
        >
          <ArticleList :channelId="channelId"></ArticleList
        ></van-tab>
      </van-tabs>
      <van-icon
        name="plus"
        size="0.37333334rem"
        @click="showPopup"
        class="moreChannels"
      />
    </div>
    <van-popup get-container="body" class="channel_popup" v-model="show">
      <ChannelEdit
        :userList="userChannelList"
        :unCheckList="unCheckChannelList"
        @addChannelEV="addChannelFn"
        @removeChannelEV="removeChannelFn"
        @closeEV="closeFn"
        ref="edit"
        v-model="channelId"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateChannelsAPI,
  removeTheChannelAPI
} from '@/api'
import ArticleList from './components/ArticleList'
import ChannelEdit from './ChannelEdit'
export default {
  data() {
    return {
      channelId: 0,
      userChannelList: [],
      show: false,
      allChannelList: [],
      channelScrollObj: {}
    }
  },
  async created() {
    // 获取所有用户频道
    const res = await getUserChannelsAPI()
    console.log(res)
    this.userChannelList = res.data.data.channels
    // 获取所有频道列表
    const res2 = await getAllChannelsAPI()
    console.log(res2)
    this.allChannelList = res2.data.data.channels
  },
  methods: {
    // 各个标签的滚轮高度不同
    channelChangeFn() {
      // 先等dom节点加载后有高度才能给滚轮移动高度
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollObj[this.channelId]
        document.body.scrollTop = this.channelScrollObj[this.channelId]
      })
    },
    showPopup() {
      this.show = true
    },
    async addChannelFn(channelObj) {
      this.userChannelList.push(channelObj)
      const newArr = this.userChannelList.filter((obj) => obj.id !== 0)
      // 深拷贝
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    async removeChannelFn(channelObj) {
      const index = this.userChannelList.findIndex(
        (obj) => obj.id === channelObj.id
      )
      this.userChannelList.splice(index, 1)
      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
    },
    closeFn() {
      this.$refs.edit.isEdit = false
      this.show = false
    },
    moveSearchPageFn() {
      this.$router.push({
        path: '/search'
      })
    },
    scrollFn() {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      this.channelScrollObj[this.channelId] = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  activated() {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  deactivated() {
    window.removeEventListener('scroll', this.scrollFn)
  },
  computed: {
    unCheckChannelList() {
      const newArr = this.allChannelList.filter((bigObj) => {
        const index = this.userChannelList.findIndex((smallObj) => {
          return bigObj.id === smallObj.id
        })
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
// 设置tabs容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 15px;
  background-color: #fff;
}
// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
